<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>&lt;meter/&gt; 和 &lt;progress/&gt; 元素</title>
</head>
<body>
<h2>Highway Speed Tracker</h2>
<form id="form1" name="form1">
    <p>
        <label for="driver-name">
            Driver Name:
            <input id="driver-name" type="text" name="driverName">
        </label>
    </p>
    <p>
        <label for="speed">
            Speed (Miles/Hour):
            <input id="speed" type="number" name="speed">
            <meter id="speed-meter" value="0" low="55" optimum="75" high="90" max="120"></meter>
        </label>
    </p>
    <p><label for="vehicle">Vehicle Type: <input type="text" id="vehicle" name="vehicle"></label></p>
</form>
<p>
    Form Completion Progress:
    <progress id="completion-progress" max="3" value="0"></progress>
</p>
<script>
    var myForm = document.form1;
    var completionProgress = document.getElementById('completion-progress');
    var speedMeter = document.getElementById('speed-meter');

    function countFieldData() {
        var count = 0;
        for (var i = 0; i < myForm.length; i++) {
            var element = myForm[i];
            if (element.value) {
                count++;
            }
        }
        return count;
    }

    function formInputChange() {
        completionProgress.value = countFieldData();
        speedMeter.value = myForm.speed.value;
    }

    myForm.addEventListener('input', formInputChange);
</script>
</body>
</html>